<template>
  <div class="table-page-search-wrapper" style="margin-top: 20px;">
    <a-form layout="inline" @keyup.enter.native="search">
      <a-row :gutter="48">
        <a-col :xxl="7" :xl="7" :lg="7" :sm="7">
          <a-form-item label="集团卡号">
            <a-input v-model="queryParam.remark" placeholder="请输入" allowClear />
          </a-form-item>
        </a-col>
        <a-col :xxl="4" :xl="4" :lg="4" :sm="4">
          <a-form-item label="性别">
            <a-select v-model="queryParam.sex" placeholder="请选择">
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="男">男</a-select-option>
              <a-select-option value="女">女</a-select-option> 
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :xxl="5" :xl="5" :lg="5" :sm="5">
          <a-form-item label="是否默认角色">
            <a-select v-model="queryParam.defaultRole" placeholder="请选择">
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="1">是</a-select-option>
              <a-select-option value="2">否</a-select-option> 
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :xxl="8" :xl="8" :lg="8" :sm="8">
          <a-form-item label="身高(cm)">
            <a-input-number style="width: 45%" placeholder="请输入" v-model="queryParam.startHeight" :precision="0" :min="0" :max="300" /> ~
            <a-input-number style="width: 45%" placeholder="请输入" v-model="queryParam.endHeight" :precision="0" :min="queryParam.startHeight" :max="300" />
          </a-form-item>
        </a-col>
        <a-col :xxl="8" :xl="8" :lg="8" :sm="8">
          <a-form-item label="体重(kg)">
            <a-input-number style="width: 45%" placeholder="请输入" v-model="queryParam.startWeight" :precision="0" :min="0" :max="500" /> ~
            <a-input-number style="width: 45%" placeholder="请输入" v-model="queryParam.endWeight" :precision="0" :min="queryParam.startWeight" :max="500" />
          </a-form-item>
        </a-col>
        <a-col :xxl="8" :xl="8" :lg="8" :sm="8">
          <a-form-item label="腰围(cm)">
            <a-input-number style="width: 45%" placeholder="请输入" v-model="queryParam.startWaist" :precision="0" :min="0" :max="500" /> ~
            <a-input-number style="width: 45%" placeholder="请输入" v-model="queryParam.endWaist" :precision="0" :min="queryParam.startWaist" :max="500" />
          </a-form-item>
        </a-col>
        <a-col :xxl="8" :xl="8" :lg="8" :sm="8">
          <a-form-item label="臀围(cm)">
            <a-input-number style="width: 45%" placeholder="请输入" v-model="queryParam.startHip" :precision="0" :min="0" :max="500" /> ~
            <a-input-number style="width: 45%" placeholder="请输入" v-model="queryParam.endHip" :precision="0" :min="queryParam.startHip" :max="500" />
          </a-form-item>
        </a-col>
        <a-col :xxl="8" :xl="8" :lg="8" :sm="8">
          <a-form-item label="胸围(cm)">
            <a-input-number style="width: 45%" placeholder="请输入" v-model="queryParam.startChest" :precision="0" :min="0" :max="500" /> ~
            <a-input-number style="width: 45%" placeholder="请输入" v-model="queryParam.endChest" :precision="0" :min="queryParam.startChest" :max="500" />
          </a-form-item>
        </a-col>
        <a-col :xxl="8" :xl="8" :lg="8" :sm="8">
          <a-form-item label="肩宽(cm)">
            <a-input-number style="width: 45%" placeholder="请输入" v-model="queryParam.startShoulder" :precision="0" :min="0" :max="200" /> ~
            <a-input-number style="width: 45%" placeholder="请输入" v-model="queryParam.endShoulder" :precision="0" :min="queryParam.startShoulder" :max="200" />
          </a-form-item>
        </a-col>
        <a-col :xxl="8" :xl="8" :lg="8" :sm="8">
          <a-form-item label="更新时间">
            <a-range-picker style="width:100%;" show-time valueFormat="YYYY-MM-DD"
              format="YYYY-MM-DD" v-model="queryParam.time" />
          </a-form-item>
        </a-col>
        <a-col :xxl="24" :xl="24" :lg="24" :sm="24">
          <span class="table-page-search-submitButtons">
            <a-button type="primary" @click="search">查询</a-button>
            <a-button style="margin-left: 8px" @click="reset">重置</a-button>
            <a-button style="margin-left: 8px" @click="handleExport">导出查询结果</a-button>
          </span>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>
<script>
export default {
  props: {},
  data() {
    return {
      queryParam: {
        sex: '',
        defaultRole: ''
      }
    }
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    handleExport() {
      this.$emit('onExport')
    },

    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },

    search() {
      let queryParam = this.filterFields(this.queryParam)
      this.$emit('onSearch', queryParam)
    },

    reset() {
      this.queryParam = {
        sex: '',
        defaultRole: ''
      }
      let queryParam = this.filterFields(this.queryParam)
      this.$emit('onSearch', queryParam)
    },

    filterFields(values) {
      const formValue = {}
      Object.keys(values).forEach(i => {
        if (values[i] || values[i] === 0 || values[i] === '0' ) {
          if (i === 'time') {
            console.log('time')
            formValue.startTime = values[i][0]
            formValue.endTime = values[i][1]
          } else {
            formValue[i] = values[i]
          }
        }
      })
      return formValue
    }
  }
}
</script>
<style lang="less" scoped>
.table-page-search-submitButtons {
  display: flex;
  justify-content: flex-end;
}
.product {
  display: flex;
  align-items: center;
  overflow: hidden;
  .img {
    display: block;
    margin: 0 2px;
    width: 60px;
    height: 60px;
    border: 1px dashed #f5f5f5;
    object-fit: scale-down;
    cursor: pointer;
  }
  .product-name {
    flex: 1;
    margin-left: 5px;
    width: 80px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    word-break: break-all; /* 追加这一行代码 */
    /* autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
  }
}
</style>
<style scoped>
/* For demo */
.ant-carousel >>> .slick-slide {
  text-align: center;
  height: 160px;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel >>> .slick-slide h3 {
  color: #fff;
}
</style>
